<template>
	
	<div class="feiyongmingxi">
				
				  
				  <el-dialog
				      v-model="dialogVisible"
				      title="Tips"
				      width="500"
				    >
				      <span>This is a message</span>
				      <template #footer>
				        <div class="dialog-footer">
				          <el-button @click="dialogVisible = false">Cancel</el-button>
				          <el-button type="primary" @click="dialogVisible = false">
				            Confirm
				          </el-button>
				        </div>
				      </template>
				    </el-dialog>
				<el-button plain @click="dialogVisible = true" class="tongguo" v-if="hasSelection">
				      作废
				</el-button>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<button class="gjsx" @click="showClick">高级筛选 <img src="../img/高级筛选.png" style="height: 15px;"/></button>
				<div class="ml1">
					<el-input type="text" maxlength="20" placeholder="输入项目名称/房号/费用编号" class="el-input"/>
					<el-button type="primary"  style="height: 40px; background-color: white;color: black; border: none;">搜索</el-button>
				</div>
			</div>
	<div class="xiala" v-show="showXiala">
							    <form>
									<el-form-item label="房屋/车位/车辆" class="xz">
									      <el-select  placeholder="全部">
									      </el-select>
									</el-form-item>
									<el-form-item label="计费类型" class="xz">
									      <el-select  placeholder="请选择计费类型">
									      </el-select>
									</el-form-item>
									<el-form-item label="计费项目" class="xz">
									    <el-select  placeholder="全部">
									    </el-select>
									</el-form-item>
					
									<p style="width: 500px; height: 1px;">&nbsp;</p>
									<el-form-item label="费用起止时间" class="xz" style="width: 800px;">
										<el-form-item>
										      <el-col :span="11">
										        <el-date-picker
										          type="date"
										          placeholder="开始"
										          style="width: 100%"
										        />
										      </el-col>
										      <el-col :span="2" class="text-center">
										        <span class="text-gray-500">至</span>
										      </el-col>
										      <el-col :span="11">
										        <el-date-picker
										          placeholder="结束"
										          style="width: 100%"
										        />
										      </el-col>
										    </el-form-item>
									</el-form-item>
									<el-form-item label="所属月" class="xz" style="width: 800px;">
										<el-form-item>
										      <el-col :span="11">
										        <el-date-picker
										          type="date"
										          placeholder="开始"
										          style="width: 100%"
										        />
										      </el-col>
										      <el-col :span="2" class="text-center">
										        <span class="text-gray-500">至</span>
										      </el-col>
										      <el-col :span="11">
										        <el-date-picker
										          placeholder="结束"
										          style="width: 100%"
										        />
										      </el-col>
										    </el-form-item>
									</el-form-item>
									<el-form-item label="生成时间" class="xz" style="width: 500px;">
										<el-form-item>
										      <el-col :span="11">
										        <el-date-picker
										          type="date"
										          placeholder="开始"
										          style="width: 100%"
										        />
										      </el-col>
										      <el-col :span="2" class="text-center">
										        <span class="text-gray-500">至</span>
										      </el-col>
										      <el-col :span="11">
										        <el-date-picker
										          placeholder="结束"
										          style="width: 100%"
										        />
										      </el-col>
										    </el-form-item>
									</el-form-item>
									<el-form-item label="支付方式" class="xz">
									      <el-select  placeholder="全部">
									      </el-select>
									</el-form-item>
									<el-form-item label="支付状态" class="xz" style="width: 800px;">
									    <el-select  placeholder="请选择支付状态" style="width: 200px;right: 5px;">
									    </el-select>
									</el-form-item>
									
									
									<el-form-item label="支付时间" class="xz" style="width: 800px;">
										<el-form-item>
										      <el-col :span="11">
										        <el-date-picker
										          type="date"
										          placeholder="开始"
										          style="width: 100%"
										        />
										      </el-col>
										      <el-col :span="2" class="text-center">
										        <span class="text-gray-500">至</span>
										      </el-col>
										      <el-col :span="11">
										        <el-date-picker
										          placeholder="结束"
										          style="width: 100%"
										        />
										      </el-col>
										    </el-form-item>
											
									</el-form-item>
									<el-button class="btn1">重置</el-button><el-button class="btn2">查询</el-button>
								</form>
								<br />
							</div>
	<div class="all">
	  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
	    <el-table-column type="selection" width="55" />
	    <el-table-column label="Date" width="120">
	      <template #default="scope">{{ scope.row.date }}</template>
	    </el-table-column>
	    <el-table-column property="name" label="Name" width="120" />
	    <el-table-column
	      property="address"
	      label="use show-overflow-tooltip"
	      width="240"
	      show-overflow-tooltip
	    />
	    <el-table-column property="address" label="address" />
	  </el-table>
	</div>
	
</template>

<script lang="ts" setup>
	import { ref,computed } from 'vue'
	import { ElTable } from 'element-plus'
	// import { Search } from '@element-plus/icons-vue'
	
	const loading = ref(true)
	setTimeout(() => {
	  loading.value = false;
	}, 3500);
	
	const selectedRows = ref([]);
	
	const handleSelectionChange = (selection) => {
	  selectedRows.value = selection;
	};
	
	const hasSelection = computed(() => selectedRows.value.length > 0);
	
	
	
	const dialogVisible = ref(false)
	
	const showXiala = ref(false);
	
	
	const showClick = () => {
	  console.log("aaa");
	  showXiala.value = !showXiala.value;  
	};
	
	
	const tableData = [
	  {
	    date: '2016-05-03',
	    name: 'Tom',
	    state: 'California',
	    city: 'Los Angeles',
	    address: 'No. 189, Grove St, Los Angeles',
	    zip: 'CA 90036',
	    tag: 'Home',
	  },
	  {
	    date: '2016-05-02',
	    name: 'Tom',
	    state: 'California',
	    city: 'Los Angeles',
	    address: 'No. 189, Grove St, Los Angeles',
	    zip: 'CA 90036',
	    tag: 'Office',
	  },
	  {
	    date: '2016-05-04',
	    name: 'Tom',
	    state: 'California',
	    city: 'Los Angeles',
	    address: 'No. 189, Grove St, Los Angeles',
	    zip: 'CA 90036',
	    tag: 'Home',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    state: 'California',
	    city: 'Los Angeles',
	    address: 'No. 189, Grove St, Los Angeles',
	    zip: 'CA 90036',
	    tag: 'Office',
	  },
	]
	
</script>

<style>
	
	.xiala {
			background-color: white;
			width: 1340px;
			height: 420px;
			overflow: auto;
			padding: 15px;
			margin-bottom: 10px;
			border: 2px solid gainsboro;
			border-radius: 10px; 
		}
		.xz{
			width: 300px;
			float: left;
			margin-bottom: 0;
			margin-right: 32px;
			height: 56px;
			align-items: center;
			text-align: left;
		}
		.text-center{
			text-align: center;
		}
		.btn1{
			position: relative;
			bottom: -330px;
			right:1000px;
			width: 100px;
			height: 40px;
			color: #7e8081;
			background-color: #fafafa;
			border: none;
			font-size: 14px;
			padding: 10px;
		}
		.btn2{
			position: relative;
			bottom: -330px;
			right:980px;
			width: 100px;
			height: 40px;
			color: #fff;
			background-color: #00c36d;
			border-color: #00c36d;
			font-size: 14px;
		}
	.gjsx{
			background-color: white;
			padding: 10px 15px;
			color: #00C36D;
			width: 146px;
			height: 40px;
		}
		.mb16{
			margin-bottom: 16px;
			display: -webkit-box;
			display: flex;
			justify-content: flex-end;
			width: 1315px;
		}
		.feiyongmingxi{
			margin-bottom: 16px;
			display: -webkit-box;
			display: flex;
			justify-content: flex-end;
			width: 1315px;
		}
		.ml1{
			width: 300px;
			border: none;
			margin-left: 10px;
			display: inline-table;
		}
		.el-input{
			width: 200px;
		}
		.big{
			background-color: #f5f5f5;
		}
		
		.example-showcase .el-dropdown-link {
		  cursor: pointer;
		  color: var(--el-color-primary);
		  display: flex;
		  align-items: center;
		}
		.example-showcase .el-loading-mask {
		  z-index: 1;
		}
		.tongguo{
			color: #00C36D;
			margin-top: 5px;
			width: 88px;
			height: 32px;
		}
	
</style>